import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { HotRankingWrapper } from './style'
import AreaHeaderV1 from '@/components/area-header-v1'
import { useAppSelector } from '@/store'

interface Iprops {
  children?: ReactNode
}

const HotRanking: FC<Iprops> = () => {
  const rankings = useAppSelector((state) => state.recommend.rankings)
  return (
    <HotRankingWrapper>
      <AreaHeaderV1 title="榜单" moreLink="/discover/ranking" />
      <div className="table">
        {rankings.map((ranking) => {
          return (
            <div className="blk" key={ranking.id}>
              <div className="top">
                <div className="left">
                  <img src={ranking.coverImgUrl + '?param=100y100'} alt="" />
                  <div className="cover_img"></div>
                </div>
                <div className="right">
                  <h3 className="name">{ranking.name}</h3>
                  <div className="icon_btns">
                    <button className="btn play"></button>
                    <button className="btn favor"></button>
                  </div>
                </div>
              </div>
              <div className="list">
                <ol>
                  {ranking.tracks
                    .slice(0, 10)
                    .map((item: any, index: number) => {
                      return (
                        <li key={item.id}>
                          <span className="num">{index + 1}</span>
                          <div className="right-content">
                            <div className="text">{item.name}</div>
                            <div className="operate">
                              <div className="o-bg o1"></div>
                              <div className="o-bg o2"></div>
                              <div className="o-bg o3"></div>
                            </div>
                          </div>
                        </li>
                      )
                    })}
                </ol>
              </div>
              <div className="more">
                <a href="#/discover/ranking">查看更多 &gt;</a>
              </div>
            </div>
          )
        })}
      </div>
    </HotRankingWrapper>
  )
}
export default memo(HotRanking)
